<template>
  <div class="nav">
    <div class="w">
      <!-- 左侧导航 -->
      <div class="dropdown fl">
        <!-- 全部商品分类 -->
        <div class="dt">全部商品分类</div>
        <div class="dd">
          <a @click="goAnchor('#household')">
            <i class="service_ico service_ico_household"></i>
            <p>文学</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#homesupply')">
            <i class="service_ico service_ico_homesupply"></i>
            <p>社科</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#phone')">
            <i class="service_ico service_ico_phone"></i>
            <p>少儿</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#pc')">
            <i class="service_ico service_ico_pc"></i>
            <p>计算机</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#dress')">
            <i class="service_ico service_ico_dress"></i>
            <p>生活</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#package')">
            <i class="service_ico service_ico_package"></i>
            <p>文教</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#food')">
            <i class="service_ico service_ico_food"></i>
            <p>科技</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#fresh')">
            <i class="service_ico service_ico_fresh"></i>
            <p>艺术</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#book')">
            <i class="service_ico service_ico_book"></i>
            <p>经管</p>
          </a>
        </div>
        <div class="dd">
          <a @click="goAnchor('#health')">
            <i class="service_ico service_ico_health"></i>
            <p>特色书籍</p>
          </a>
        </div>
      </div>
      <div class="main">
        <!-- 焦点图版块 -->
        <div class="focus fl">
          <!-- 轮播图 -->
          <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-bind:key="banner" v-for="banner in banners">
              <img :src="banner.src" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
          <!-- 固定图 -->
          <div class="fixed">
            <img src="../../assets/upload/fixed1.jpg" />
            <img src="../../assets/upload/fixed2.png" />
            <img src="../../assets/upload/fixed3.png" />
          </div>
        </div>
        <!-- 即时信息版块 -->
        <div class="newsflash fr">
          <div class="user">
            <div class="user-icon">
              <img src="../../assets/upload/fixed3.png" />
              <!-- <img v-if="isLogined" :src="userIcon" />
              <img v-else src="../../assets/img/user_default_icon.jpg" /> -->
            </div>
            <span>Hi!</span>
            <span v-if="isLogined" v-text="userName"></span>
            <span v-else>你好</span>
            <br />
            <div class="button" v-if="isLogined">
              <el-button type="primary" plain size="small" @click="goToUserCenter()">个人中心</el-button>
            </div>
            <div class="button" v-else>
              <el-button type="primary" plain size="small" @click="goToLogin()">登录</el-button>
              <el-button type="primary" plain size="small" @click="goToLogin()">注册</el-button>
            </div>
          </div>
          <!-- 新闻版块 -->
          <div class="news">
            <div class="news-hd">公告</div>
            <div class="news-bd">
              <ul class="content">
                <li :key="a" v-for="a in announces">
                  <strong v-text="a.date"></strong>
                  <span v-text="a.content"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "../../../node_modules/swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  props: {
    isLogined: {
      type: Boolean,
      default() {
        return false;
      },
    },
    userName: {
      type: String,
      default() {
        return "";
      },
    },
    userIcon: {
      type: String,
      default() {
        return "../../assets/img/user_default_icon.jpg";
      },
    },
  },
  data() {
    return {
      welcome: "Hi！",
      banners: [
        { src: require("../../assets/upload/book1.jpg") },
        { src: require("../../assets/upload/book2.jpg") },
        { src: require("../../assets/upload/book3.jpg") },
        { src: require("../../assets/upload/book4.jpg") },
        { src: require("../../assets/upload/lunbo5.png") },
        { src: require("../../assets/upload/lunbo6.png") },
      ],
      swiperOptions: {
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, // 当用户滑动图片后继续自动轮播
        },
      },
      fixeds: [
        { src: require("../../assets/upload/fixed1.jpg") },
        { src: require("../../assets/upload/fixed2.png") },
        { src: require("../../assets/upload/fixed3.png") },
      ],
      announces: [
        {
          date: "[2021.2.14]",
          content: "今晚12点书城将进行维护，不便之处请谅解！",
        },
        {
          date: "[2021.2.13]",
          content: "喜报！多家上等网上书店入驻书城！赶快来抢购吧！",
        },
        {
          date: "[2021.2.11]",
          content: "喜报！书城注册量在过去24小时内已超5人！",
        },
        {
          date: "[2021.2.9]",
          content:
            "网上书城上线啦！书城主要以书城的用户和书店为根本，以促进书城用户与书店之间的交易服务为中心，给书城用户提供方便快捷的购物方式，给书店提供丰富全面的书本展销货架，让书城用户能够方便快捷、用最少的钱购买到满意的书籍，让书店实现线上销售致富的生活！",
        },
      ],
    };
  },
  methods: {
    goAnchor(id) {
      document.querySelector(id).scrollIntoView({
        behavior: "smooth",
      });
    },
    goToLogin() {
      this.$parent.goToLogin();
    },
    goToUserCenter() {
      this.$parent.goToUserCenter();
    }
  },
  mounted() {},
};
</script>

<style scoped>
.nav {
  border-top: 2px solid #b1191a;
}
.dropdown {
  width: 210px;
  height: 45px;
}
.dropdown .dt {
  height: 100%;
  margin-bottom: 3px;
  background-color: #b1191a;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  line-height: 45px;
  transition: all 2s ease;
}
.dropdown .dt:hover {
  cursor: default;
  background-color: #fff;
  color: #b1191a;
  font-size: 20px;
}
.dropdown .dd {
  box-sizing: border-box;
  overflow: hidden;
  width: 49%;
  height: 72px;
  display: inline-block;
  margin-top: 6px;
  padding: 2px;
  border: 1px solid #ccc;
  text-align: center;
}
.dropdown .dd:hover {
  padding: 0;
  border-color: #b1191a;
  color: red;
  font-size: 14px;
  font-weight: bold;
}
.main {
  width: 980px;
  height: 455px;
  margin-top: 10px;
  margin-left: 219px;
}
.focus {
  position: relative;
  width: 790px;
  height: 100%;
}
.swiper {
  height: 340px;
}
.fixed {
  margin-top: 5px;
}
.newsflash {
  width: 180px;
  height: 100%;
}
.user {
  width: 100%;
  height: 126px;
  margin-bottom: 5px;
  padding-top: 20px;
  background-color: #b4eeb4;
  text-align: center;
  color: #00c5cd;
}
.user-icon img {
  display: block;
  margin: 0 auto;
  overflow: hidden;
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
  border-radius: 25px;
}
.user .button {
  margin-top: 8px;
}
.news {
  width: 100%;
  height: 302px;
}
.news-hd {
  width: 100%;
  height: 32px;
  background-color: #d8bfd8;
  font-size: 14px;
  color: white;
  line-height: 32px;
  text-align: center;
}
.news-bd {
  overflow: auto;
  width: 178px;
  height: 270px;
  border-bottom: 1px solid #d8bfd8;
  border-left: 1px solid #d8bfd8;
  border-right: 1px solid #d8bfd8;
  text-align: justify;
}
.news-bd .content {
  padding: 3px 3px;
}
.news-bd li:hover {
  color: red;
}
.news-bd::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
}
.news-bd::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 7px 0 0 7px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.news-bd::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 7px 0 0 7px;
}
.service_ico {
  display: block;
  width: 32px;
  height: 32px;
  margin: 7px auto;
}
.service_ico_household {
  background: url(../../assets/img/household.png) no-repeat;
}
.service_ico_homesupply {
  background: url(../../assets/img/homesupply.png) no-repeat;
}
.service_ico_phone {
  background: url(../../assets/img/phone.png) no-repeat;
}
.service_ico_pc {
  background: url(../../assets/img/pc.png) no-repeat;
}
.service_ico_dress {
  background: url(../../assets/img/dress.png) no-repeat;
}
.service_ico_package {
  background: url(../../assets/img/package.png) no-repeat;
}
.service_ico_food {
  background: url(../../assets/img/food.png) no-repeat;
}
.service_ico_fresh {
  background: url(../../assets/img/fresh.png) no-repeat;
}
.service_ico_book {
  background: url(../../assets/img/book.png) no-repeat;
}
.service_ico_health {
  background: url(../../assets/img/health.png) no-repeat;
}
</style>